<template>
  <div class="module-layout">
    <je-panel v-bind="options">
      <template #top>
        <source-head />
      </template>
      <template #default>
        <div class="source-module-box">
          <div
            v-for="moduleItem in moduleOptions"
            :key="moduleItem.code"
            class="module-item"
            :class="{ 'active-module-item': moduleItem.code == curModuleCode }"
            @click="changeModuleCode(moduleItem.code)"
            >{{ moduleItem.name }}</div
          >
        </div>
        <div></div>
      </template>
    </je-panel>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
  import SourceHead from '@/views/data-source/common/source-head.vue';
  import { SOURCE_VIEW_OPTIONS } from '@/helper/constant';
  import { Panel } from '@jecloud/ui';
  export default defineComponent({
    name: 'SourceMain',
    components: {
      JePanel: Panel,
      SourceHead,
    },
    setup() {
      const state = reactive({
        options: {
          top: { size: 40, split: false },
        },
        moduleOptions: SOURCE_VIEW_OPTIONS,
        curModuleCode: SOURCE_VIEW_OPTIONS[0].code, //当前模块code
      });
      const methods = {
        changeModuleCode(code) {
          //切换
          if (state.curModuleCode != code) {
            state.curModuleCode = code;
          }
        },
      };
      onMounted(() => {});
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .module-layout {
    width: 100%;
    height: 100%;
  }
  .source-module-box {
    width: 100% !important;
    height: 40px !important;
    display: flex;
    box-sizing: border-box;
    background-color: #fafafa;
    // border-bottom: 1px solid #ecedf0;
    .module-item {
      width: 106px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-right: 1px solid #ecedf0;
      cursor: pointer;
    }
  }
</style>
